<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>000</title>
        <style>
            body {
                background:#000;
                text-align:center;
            }
            h1 {
                display:inline-block;
                font-size:100px;
                height:150px;
                color:rgba(255,255,255,0.3);
                background:-webkit-linear-gradient(-30deg, rgba(255,255,255,0) 100px, rgba(255,255,255,1) 160px, rgba(255,255,255,1) 220px,rgba(255,255,255,0) 300px ) no-repeat -300px 0px;
                -webkit-background-clip:text;
            }
        </style>
        <script>
            window.onload = function () {
                var oH1 = document.getElementsByTagName("h1")[0];
                var timer = null;
                var lft = -300;
                function move() {
                    timer = setInterval( function () {
                        lft += 10;
                        if(lft == 1000) {
                            lft = -300;
                            clearInterval(timer);
                        }
                        oH1.style.backgroundPosition = lft +"px 0px";
                    },20 )
                }
                move();
                setInterval( function () {
                    move();
                },5000 )
            }
        </script>
    </head>
    <body>
        <h1>open the door</h1>
    </body>
</html>